<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<link href="lib/view.css" rel="stylesheet" />

<link href="lib/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet" />
<script src="lib/jquery/3.1.1/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>

<script src="lib/control.js"></script>

</head>
<body>
	<div class="container font"
		style="background-color: #33b5e5; width: 100%; height: 200px;">
		<p style="margin-top: 80px; text-align: center">排列组合的几种生成算法及其实现</p>
	</div>
	<div class="container box2">
		<form name="form-sort" class="form-inline" role="form"
			style="align-self: center">
			<div class="form-group">
				<label class="sr-only" for="name">名称</label> <input name="N" id="N"
					type="text" class="form-control" placeholder="请输入元素个数" />
			</div>
			<button type="button" class="btn btn-primary" id="sort-ordinal">
				<i class="fa fa-sort">ordinal</i>
			</button>
			<button type="button" class="btn btn-primary" id="sort-dict">
				<i class="fa fa-sort">dict</i>
			</button>
			<button type="button" class="btn btn-primary" id="sort-trans">
				<i class="fa fa-sort">trans</i>
			</button>
		</form>

		<div class="divider"></div>
		<div class="container" style="background-color:;width:80%;min-height:270px;">
			<div class="table-responsive" style="">
  			<table class="table">
    			<caption style="text-align:center;color:green;">Result</caption>
    			<tbody id="sort-result">
      				
    			</tbody>
  			</table>
			</div>
			<div id ="ordinal">
			</div>
		</div>
	</div>

	<div class="footer">
	</div>
	
	<!--script-->
	<script src="lib/d3/4.7.1/d3.js"></script>
	<script src="lib/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
	$(document).ready(function(){
		$("#sort-ordinal").click(function(){
			$("#sort-result").empty();
			var N = $("input[name='N']").val()*1;
			for (var i = fac(N)-1; i >= 0;) {
			   // $("#ordinal").append("<p>" + arr + "</p>");
			    $("#sort-result").append("<tr>");
			    for(var j = 0;j<N;j++){
					var arr = facToPermutation(toFacNum(i,N),N);
			    	$("#sort-result").append("<td>" + arr + "</td>");
			    	i--;
			    }
			    $("#sort-result").append("</tr>")
			}
			
		});
		$("#sort-dict").click(function(){
			$("#sort-result").empty();
			var N = $("input[name='N']").val()*1;
			var dictOrder = [];  //初始序列
		    for (var i = 0; i < N; i++) {
		      dictOrder[i] = i + 1;
		    }
			for (var i = 0; i <fac(N);) {
			   // $("#ordinal").append("<p>" + arr + "</p>");
			    $("#sort-result").append("<tr>");
			    for(var j = 0;j<N;j++){
			    	$("#sort-result").append("<td>" + dictOrder + "</td>");
			    	dictOrder = nextDictOrder(dictOrder);
			    	i++;
			    }
			    $("#sort-result").append("</tr>")
			}
		});
		$("#sort-trans").click(function(){
			$("#sort-result").empty();
			var N = $("input[name='N']").val()*1;
			var transOrder = []; //初始序列
		    var stat = [];
		    for (var i = 0; i < N; i++) {
		      transOrder[i] = i + 1;
		      stat[i] = -1;
		    }
			for (var i = 0; i <fac(N);) {
			   // $("#ordinal").append("<p>" + arr + "</p>");
			    $("#sort-result").append("<tr>");
			    for(var j = 0;j<N;j++){
			    	$("#sort-result").append("<td>" + transOrder + "</td>");
			    	[transOrder,stat] = nextTransOrder(transOrder,stat);
			    	i++;
			    }
			    $("#sort-result").append("</tr>")
			}
		});
		
	});
	</script>
</body>
</html>
